<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		body {
			background-color: #f5f5f5;
		}

		#app {
			background-color: #fff;
			width: 400px;
			margin: 10px auto;
			padding: 20px;
			box-shadow: 0 0 10px 1px #999;
		}

		label {
			font-size: 20px;
		}

		input {
			height: 35px;
			margin: 10px;
			border: 2px solid #999;
			border-radius: 3px;
			padding: 0 10px;
			outline: none;
			font-size: 16px;
		}

		span {
			color: red;
			font-weight: 600;
		}

		p {
			font-size: 18px;
			line-height: 45px;
			color: #666;
		}

		i {
			color: blue;
		}
	</style>
	<body>
		<div id='app'>
			<h3 align='center'>黄金价格计算器</h3>
			<label>买入单价：</label>
			<input v-model.number="in_price" type="number">
			<span>元/克</span> <br>
			<label>卖出单价：</label>
			<input v-model.number="out_price" type="number">
			<span>元/克</span> <br>
			<label>手续费率：</label>
			<input v-model.number="rate" type="number">
			<span>%</span> <br>
			<label>购买数量：</label>
			<input v-model.number="number" type="number">
			<span>克</span> <br>
			<hr>
			<p>
				成本价： <i>{{cost}} 元</i> <br>
				卖出价：<i>{{sell}} 元</i><br>
				手续费：<i>{{commission}} 元</i><br>
				赎回获得：<i>{{(sell-commission).toFixed(2)}} 元</i><br>
				净收入：<i>{{(sell-commission-cost).toFixed(2)}} 元</i>
			</p>
			<hr >
			人民币：<input type="number"v-model.number="cny"/> <br>
			<b>美元：{{dollar}}</b><br>
			<b>欧元：{{euro}}</b><br>
			<b>日元：{{yen}}</b><br>
			<b>韩元：{{kwo}}</b><br>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						cny:'',
						dollar:'',
						euro:'',
						yen:'',
						kwo:'',
						in_price: '', // 买入单价
						out_price: '', // 卖出单价
						rate: 0.3, // 手续费率
						number: '' // 购买数量
					}
				},
				watch:{//监听属性
					cny(newValue,oldValue){
						// console.log(a,b)
						this.dollar=(newValue*0.1382).toFixed(2)
						this.euro=(newValue*0.1266).toFixed(2)
						this.yen=(newValue*20.6596).toFixed(2)
						this.kwo=(newValue*199.54).toFixed(2)
					}
				},
				computed: {
					cost() { // 成本价
						return (this.in_price * this.number).toFixed(2);
					},
					sell() { // 卖出总价
						return (this.out_price * this.number).toFixed(2);
					},
					commission() { // 手续费
						return (this.sell * (this.rate / 100)).toFixed(2);
					},
					// redeem() { // 赎回获得
					// 	return (this.sellTotal - this.fee).toFixed(2);
					// },
					// netIncome() { // 净收入
					// 	return (this.redeem - this.costPrice).toFixed(2);
					// }
				}
			}).mount('#app')
		</script>
	</body>
</html>
